<template>
    <div class="wh-100% flex flex-col gap-2.5">
        <n-card>
            <div class="w-full flex justify-between items-center">
                <div class="flex gap-16px">
                    <n-icon :component="PersonCircle" :size="72" />
                    <div
                        class="box-border h-full py-10px flex flex-col justify-between"
                    >
                        <div class="font-bold font-size-18px">
                            {{ `欢迎使用，${userStore.getUserInfo.userName}` }}
                        </div>
                        <div class="opacity-70">
                            <!-- {{ dailyWord }} -->
                            欢迎使用预测平台后台管理系统，祝您使用愉快！
                        </div>
                    </div>
                </div>
            </div>
        </n-card>
        <div class="w-full flex gap-2.5">
            <n-card class="w-50%" title="系统访问人数统计">
                <div ref="visitChartRef" class="w-full h-75"></div>
            </n-card>
            <n-card class="w-50%">
                <template #header>
                    <div class="w-full flex justify-between">
                        <div>预测接口使用统计</div>
                        <n-tabs
                            class="w-60"
                            type="segment"
                            v-model:value="activeTab"
                            @update:value="updatePieChart"
                        >
                            <n-tab name="today" label="今日"> </n-tab>
                            <n-tab name="pastSevenDays" label="过去7天">
                            </n-tab>
                            <n-tab name="pastFifteenDays" label="过去15天">
                            </n-tab>
                        </n-tabs>
                    </div>
                </template>

                <div ref="pieChartRef" class="w-full h-75"></div>
            </n-card>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onActivated, onMounted } from "vue";
import { PersonCircle } from "@vicons/ionicons5";
import * as echarts from "echarts";

import { getStore } from "@/store";
import {
    Statistic,
    getVisitStatistic,
    getApiStatistic,
} from "@/service/api/statistic";

const userStore = getStore("user");

const visitStatistic = ref<Statistic>({} as Statistic);
const modulePredictionStatistic = reactive({
    weather: {} as Statistic,
    stock: {} as Statistic,
    electricity: {} as Statistic,
});
const customerPredictionStatistic = ref<Statistic>({} as Statistic);

const url = {
    weather: "/user/file/static_weather-predict",
    stock: "/user/file/stock-predict",
    electricity: "/user/file/electricity-predict",
    customer: "/user/file/submit-weather-predict",
};

const activeTab = ref("today");

const visitChartRef = ref<HTMLElement | null>(null);
let visitChart: echarts.ECharts | null = null;

const pieChartRef = ref<HTMLElement | null>(null);
let pieChart: echarts.ECharts | null = null;

// 初始化图表
const initVisitChart = () => {
    if (visitChartRef.value) {
        visitChart = echarts.init(visitChartRef.value);
        updateVisitChart();
    }
};

// 初始化饼图
const initPieChart = () => {
    if (pieChartRef.value) {
        pieChart = echarts.init(pieChartRef.value);
        updatePieChart();
    }
};

// 更新图表数据
const updateVisitChart = () => {
    if (visitChart) {
        const option = {
            tooltip: {},
            xAxis: {
                data: ["今日", "过去7天", "过去15天"],
            },
            yAxis: {},
            series: [
                {
                    name: "人数",
                    type: "bar",
                    data: [
                        visitStatistic.value.today,
                        visitStatistic.value.pastSevenDays,
                        visitStatistic.value.pastFifteenDays,
                    ],
                },
            ],
        };
        visitChart.setOption(option);
    }
};

// 更新饼图数据
const updatePieChart = () => {
    if (pieChart) {
        const data = [
            {
                name: "weather",
                value: modulePredictionStatistic.weather[
                    activeTab.value as keyof Statistic
                ],
            },
            {
                name: "stock",
                value: modulePredictionStatistic.stock[
                    activeTab.value as keyof Statistic
                ],
            },
            {
                name: "electricity",
                value: modulePredictionStatistic.electricity[
                    activeTab.value as keyof Statistic
                ],
            },
        ];

        const option = {
            title: {
                text: "预测接口访问情况",
                left: "center",
            },
            tooltip: {
                trigger: "item",
            },
            series: [
                {
                    name: "访问次数",
                    type: "pie",
                    radius: "50%",
                    data: data,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: "rgba(0, 0, 0, 0.5)",
                        },
                    },
                },
            ],
        };
        pieChart.setOption(option);
    }
};

onMounted(() => {
    initVisitChart();
    initPieChart();
});

onActivated(async () => {
    try {
        visitStatistic.value = await getVisitStatistic();

        modulePredictionStatistic.weather = await getApiStatistic(url.weather);
        modulePredictionStatistic.stock = await getApiStatistic(url.stock);
        modulePredictionStatistic.electricity = await getApiStatistic(
            url.electricity
        );

        customerPredictionStatistic.value = await getApiStatistic(url.customer);

        console.log(visitStatistic.value)
        updateVisitChart();
        updatePieChart();
    } catch (err) {
        window.NMessage.error((err as Error).message);
        console.log(err)
    }
});
</script>

<style scoped></style>
